<template>
	<!-- 道 关于 -->
	<view class="app-container">
		<view class="detail"  v-for="(item,index) in activityDetail">
			<text class="title">{{item.title}}</text>
			<view class="description">{{item.description1}}</view>
			<image class="image" :src="item.src" mode="widthFix"></image>
			<view class="description">{{item.description2}}</view>			
		</view>


		<view class="notes">
			<view class="top">
				<view class="number">{{notes.total}}条留言</view>
				<view class="button">写留言</view>
			</view>
			<view class="notes-item" v-for="(item,index) in notes.list" :key="index">
				<image class="avatar" :src="item.avatar" mode="widthFix"></image>
				<view class="right">
					<view class="name">{{item.name}}</view>
					<view class="time">{{item.time}}</view>
					<view class="description">{{item.description}}</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	// function getUrlParam(url, paramName) {
	//   const searchParams = new URLSearchParams(url.split("?")[1]);
	//   return searchParams.get(paramName);
	// }

	// const url = window.location.href;
	// const paramValue=0;
	// paramValue = getUrlParam(url, "id");
	// console.log(paramValue);

	export default {
		
		data() {
			return {				
				   //
				   activityDetail: [],
				   notes: {
					total: 10,
					list: [
						{
							avatar: '/static/resources/avatar.png',
							name: '特有文艺范',
							time: '2024-06-03',
							description: '此次调查面向全球16个主要市场的3300多家企业进行，涵盖全球主要经济体，包括目前已在中国市场开展业务或计划开拓中国市场的企业。调查显示，海外企业将供应链、技术和创新、数字化能力和平台作为未来一年在中国市场的三大投资重点。',
						},
						{
							avatar: '/static/resources/avatar.png',
							name: '特有文艺范',
							time: '2024-06-03',
							description: '此次调查面向全球16个主要市场的3300多家企业进行，涵盖全球主要经济体，包括目前已在中国市场开展业务或计划开拓中国市场的企业。调查显示，海外企业将供应链、技术和创新、数字化能力和平台作为未来一年在中国市场的三大投资重点。',
						}
					]
				}
				
			}
		},
		onLoad(options) {
			 console.log("options====",options)
			this.getinfo(options.id);
		},
		methods: {
			getUrlParam(url, paramName) {
			  const searchParams = new URLSearchParams(url.split("?")[1]);
			  return searchParams.get(paramName);
			},
			getinfo(id){
				// const url = window.location.href;
				const paramValue = id;
				if(paramValue==1){
					this.activityDetail.push({
						title: 'FAITH ERG Co- Chairs - Role Information',
						description1: '',
						src: 'https://trip.chinahood.net/assets/wechaapp/images/about_1.png',
						description2: '',
					})
				}
				if(paramValue==2){
					this.activityDetail.push({
						title: 'FAITH ERG 主题活动即将上线',
						description1: '',
						src: 'https://trip.chinahood.net/assets/wechaapp/images/about_2.png',
						description2: '',
					})
				}
				if(paramValue==3){
					this.activityDetail.push({
						title: 'FAITH ERG CUBE - 《与神对话》读书分享第一期',
						description1: '',
						src: 'https://trip.chinahood.net/assets/wechaapp/images/about_3.png',
						description2: '',
					})
				}
				if(paramValue==4){
					this.activityDetail.push({
						title: 'FAITH ERG CUBE - 《与神对话》读书会',
						description1: '',
						src: 'https://trip.chinahood.net/assets/wechaapp/images/about_4.png',
						description2: '',
					})
				}
				if(paramValue==5){
					this.activityDetail.push({
						title: '“东南西北中，圆融在汇丰”\n感恩',
						description1: '',
						src: 'https://trip.chinahood.net/assets/wechaapp/images/about_5.png',
						description2: '',
					})
				}
			}
			// {
			// 	title: '汇丰进博特别报告：海外企业继续看好中国市场',
			// 	description1: '中国的制造业优势、消费市场规模以及数字经济和可持续发展领域的机遇，是吸引海外企业加大布局的主要动力。',
			// 	src: 'https://api.softouchco.com/hsbc/activity_detial.png',
			// 	description2: '汇丰发布为第六届中国国际进口博览会特别定制的《海外企业看中国2023》调查报告。报告显示，受中国疫后经济复苏的鼓舞，超过八成（87%）受访海外企业表示将拓展中国业务布局。',
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.app-container {
		text-align: center;
		padding-bottom: 100rpx;
		.detail {
			background: #fae7b766;
			padding-bottom: 80rpx;
		}
		.title {
			display: block;
			font-size: 44rpx;
			line-height: 72rpx;
			width: 80%;
			padding: 30rpx 0 50rpx 0;
			margin: 0 auto;
		}
		.description {
			font-size: 30rpx;
			line-height: 50rpx;
			width: 80%;
			margin: 0 auto;
		}
		.image {
			width: 100%;
			margin: 30rpx 0;
		}
		
		
		.notes {
			padding: 40rpx 30rpx 0 30rpx;
			.top {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				.number {
					font-size: 22rpx;
					color: #999999;
					line-height: 1.2;
				}
				.button {
					font-size: 24rpx;
					letter-spacing: 0rpx;
					padding:0 20rpx;
					height: 40rpx;
					line-height: 40rpx;
					background: #F2F2F2;
					color: #333333;
					text-align: center;
				}
			}
			.notes-item {
				display: flex;
				margin-top: 50rpx;
				.avatar {
					width: 80rpx;
					height: 80rpx;
					margin-left: 20rpx;
					margin-right: 20rpx;
				}
				.right {
					width: 100%;
					display: flex;
					flex-direction: column;
					text-align: left;
					.name {
						font-size: 24rpx;
						line-height: 1.2;
						color: #333333;
					}
					.time {
						line-height: 1;
						font-size: 22rpx;
						color: #808080;
						margin-top: 10rpx;
					}
					.description {
						width: 100%;
						margin-top: 20rpx;
						font-size: 24rpx;
						line-height: 2;
						color: #000000;
					}
				}
			}
		}
		
	}

</style>
